<template>
	<view class="container">
		<u-navbar
			:is-fixed="false"
			:border-bottom="false"
			:is-back="false"
			title="食谱"
			:background="{ background: 'linear-gradient(90deg, #69b0ff, #e58b8a)' }"
			title-color="#fff"
		>
		</u-navbar>
		<view v-if="!isDetail">
			<view class="flex-center">
				<u-input style="flex: 1;" v-model="keyword" :type="'text'" :border="true" @input="filterMenu" />
				<u-button v-if="userInfo.phone === 'admin'" size="mini" class="btn" type="primary" @click="doAdd">添加食谱</u-button>
			</view>
			<view class="menus">
				<view class="left">
					<view @click="changeTab(item)" class="tab" :class="currentTab === item.text ? 'tab-focus' : ''" :key="index" v-for="(item, index) in typeList">{{ item.text }}</view>
				</view>
				<view class="right">
					<view @click="viewDetail(item)" class="menu" v-for="(item, index) in menus" :key="index">
						<image class="img" :src="item.imgs[0]"></image>
						<view class="name">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="isDetail" class="detail">
			<u-icon @click="isDetail = false" class="icon" name="arrow-left"></u-icon>
			<u-swiper :list="detailInfo.imgs"></u-swiper>
			<view class="name">{{detailInfo.name}}</view>
			<view class="desc">{{detailInfo.desc}}</view>
		</view>
	</view>
</template>

<script>
import { getMenu } from '../../api/system/api'
export default {
	data() {
		return {
			typeList: [
				{
					text: '月经'
				},
				{
					text: '润肺利咽'
				},
				{
					text: '发散解表'
				},
				{
					text: '清热生津'
				},
        {
					text: '解热除烦'
				},
				{
					text: '补气养血'
				},
				{
					text: '清热解毒'
				},
				{
					text: '祛风除湿'
				},
        {
					text: '补肾益肾'
				},
				{
					text: '健脾益脾'
				},
				{
					text: '疏肝理气'
				},
				{
					text: '降脂降压'
				},
				{
					text: '润肤养颜'
				}
			],
			allMenus: [],
			menus: [],
			current: 0,
			isDetail: false,
			detailInfo: {},
			userInfo: {},
			keyword: '',
			currentTab: ''
		}
	},
  onShow() {
    uni.$off('refreshMenu')
    uni.$once('refreshMenu', (data) => {
      this.refreshData()
    })
  },
	onTabItemTap() {
		this.current = 0
		this.refreshData()
	},
	mounted() {
    uni.getStorage({     
      key:'userInfo',
      success: (res) => {
        this.userInfo = res.data;
				this.currentTab = this.typeList[0].text
				console.log(this.userInfo)
      }
    })
		this.refreshData()
	},
	methods: {
		doAdd() {
			this.$u.route('/pages/manage/add')
		},
		changeTab(item) {
			this.currentTab = item.text || item
			console.log(this.allMenus)
			this.menus = this.allMenus.filter(v => v.menuType === this.currentTab)
		},
		refreshData() {
			getMenu({
				page: 1,
				pageSize: 1000
			}).then(res => {
				this.allMenus = res.data.data || []
				this.allMenus.forEach((v, i) => {
					this.allMenus[i].imgs = JSON.parse(v.imgs)
					this.allMenus[i].imgs.forEach((v2, i2) => {
						this.allMenus[i].imgs[i2] = 'http://127.0.0.1:3000/' + v2
					})
				})
				this.changeTab(this.currentTab)
			})
		},
		viewDetail(item) {
			this.isDetail = true;
			this.detailInfo = item
		},
		filterMenu() {
			if (!this.keyword) {
				this.currentTab = this.typeList[0].text
				this.changeTab(this.currentTab)
				return
			}
			let one = this.allMenus.filter(v => v.name.includes(this.keyword))
			if (one.length) {
				this.currentTab = one[0].menuType
				this.menus = this.allMenus.filter(v => v.name.includes(this.keyword))
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.flex-center {
	display: flex;
	align-items: center;
	gap: 30rpx;
	padding: 0 30rpx;

	.tabs {
		width: calc(100% - 150rpx);
	}

	.btn {
		width: 120rpx;
	}
}

.menus {
	display: flex;
	.menu {
		width: 48%;
		padding: 10rpx;
		margin-bottom: 12rpx;
	}

	.left {
		width: 20%;
		height: 80vh;
		background: #F4F4F4;

		.tab {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #F4F4F4;
		}

		.tab-focus {
			background: #fff;
			color: orange;
		}
	}
	.right {
		width: 80%;
		padding: 12rpx;
	}

	.img {
		width: 100%;
		height: 200rpx;
	}
	.name {
		text-align: center;
		font-weight: bold;
		margin-top: 20rpx;
		color: orangered;
	}
}


.detail {
	position: relative;
	.icon {
		position: absolute;
		top: 30rpx;
		left: 30rpx;
		z-index: 99;
		font-size: 40rpx;
	}

	.name {
		margin-top: 20rpx;
		line-height: 60rpx;
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
		width: 100%;
	}

	.desc {
		color: #999;
		padding: 30rpx;
	}
}

</style>
